<template>
<div id="DailiList" class="page-blank">
  <van-nav-bar title="渠道商" left-arrow @click-left="goBack()"/>
  <van-search v-model="searchValue" placeholder="请输入代理名称或代理手机号" show-action shape="round">        
    <div slot="action" @click="onSearch" class="ft-blue">搜索</div>
  </van-search>
  <div class="flex-body">   
    <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="getList">
      <div class="role-people-box" v-for="(v,i) in list" :key="i">
        <div class="people-title">
          <img :src="v.icon || './logo.png'" style="display: inline-block;">
          <div class="left">
            <div>{{ v.nick }}({{ v.userId }})</div>
            <div>提成比:{{ v.virtualProportion }}%</div>
          </div>
          <div class="right">
            <div class="btn" @click="modify( v )"></div>
          </div>
        </div>
        <div class="people-main">
          <div class="label">
            <span>用户名</span>
            <span class="right">{{ v.userName }}</span>
          </div>
          <div class="label">
            <span>手机号</span>
            <span class="right">{{ v.phone }}</span>
          </div>
        </div>
      </div>
    </van-list>
  </div>
</div>
</template>

<script lang="ts">
import { Vue, Component } from 'vue-property-decorator';
import axios from '@/utils/request';

@Component
export default class DailiList extends Vue {

  roleType: any = this.$store.state.userInfo.roleType
  list: any = []
  page: any = 1
  loading: any = false
  finished: any = false
  searchValue: any = ''

  onSearch() {
    this.page = 1
    this.list = [];
    this.loading = true;
    this.finished = false;
    this.getList()
  }
  getList() {
    let page = this.page, size = 10, vague = this.searchValue, roleType = 4, userId = this.$store.state.userInfo.userId;
    let query: any = { page, size, userId, roleType, vague };
    // if ( this.searchValue ) query.content = this.searchValue;
    axios.get('/api/roleController/getUserAllSubordinate', query).then((res: any) => {    
      if ( this.page != page ) { return ; }
      this.page = this.page + 1;      
      let list = res.list || [];
      this.loading = false;
      this.list.push( ...list );
      if(res.isLastPage) this.finished = true;
    }).catch(() => {
      this.loading = false;
      this.finished = true;
    });
  }
  modify(shop: any) {
    this.$router.push({ name: 'AddJuese', query: { type: 'modify' }, params: shop });
  }

  goBack() {
    this.$router.go(-1);
  }

  mounted() {
  }
  
};
</script>

<style lang="scss">
#DailiList { 
  .role-people-box {
    line-height: 26px;
    background: #fff;
    box-shadow: 3px 7px 20px 0px rgba(0, 0, 0, 0.1);
    border-radius: 5px;
    padding: 0 10px;
    box-sizing: border-box;
    font-size: 0.28rem;
    width: 6.7rem; 
    margin: 0.1rem auto;
    .people-title {
      line-height: 57px;
      font-size: 15px;
      .left {
        display: inline-block;
        line-height: 20px;
        vertical-align: middle;
        padding-left: 10px;
      }
      img {
        height: 35px;
        width: 35px;
        vertical-align: middle;
      }
      .right {
        float: right;
        color: #0086d1;
        .btn {
          margin-left: 10px;
          display: inline-block;
          height: 18px;
          width: 18px;
          background: url(~@/assets/img/main/modify.png) no-repeat center;
          background-size: 18px 18px;
        }
      }
    }
    .people-main {
      font-size: 15px;
      .label {
        height: 50px;
        line-height: 50px;
        color: #666666;
        border-bottom: 1px solid #ebebeb;
        &:last-child {
          border-bottom: none;
        }
      }
      .right {
        float: right;
        color: #333333;
      }
    }
    .data-main {
      padding: 5px 0;
      .label {
        color: #0086d1;
      }
    }  
  }
}
</style>

